<template>
	<v-layout type="main">
		<div class="detail-layout">
			<el-form
				class="form myself-form alick-add-form"
				ref="form"
				:model="addForm"
				:rules="submitRules"
				label-width="120px"
			>
				<div v-if="active == 1">
					<h3 class="add-alike-title">基本信息</h3>
					<!-- <el-form-item label="范围" prop="visibility">
            <el-radio-group v-model="addForm.visibility">
              <el-radio :label="0">私有的</el-radio>
              <el-radio :label="1">共享的</el-radio>
            </el-radio-group>
          </el-form-item> -->
					<el-form-item label="类型" prop="type">
						<el-radio v-model="addForm.is_webide" :label="true">VsCode</el-radio>
						<el-radio v-model="addForm.is_webide" :label="false">Jupyter</el-radio>
					</el-form-item>
					<el-form-item label="名称" prop="name">
						<el-input type="text" v-model="addForm.name" />
					</el-form-item>
					<el-form-item label="描述" prop="desc">
						<el-input type="textarea" :rows="3" v-model="addForm.desc" />
					</el-form-item>
					<el-form-item label="配图">
						<media-uploader accept=".jpg,.jpeg,.png,.JPG,.JPEG" :src="addForm.avatar" @avatarPath="avatarPath" />
					</el-form-item>
					<el-form-item label="" prop="tensorboard">
						<el-checkbox v-model="addForm.tensorboard">tensorboard</el-checkbox>
					</el-form-item>
					<h3 class="add-alike-title">开发环境配置</h3>
					<div class="node-module">
						<h3 class="node-module-title">主节点</h3>
						<el-form-item label="环境" prop="mainNodeImageId">
							<el-cascader
								v-model="mainNode.image_group"
								:options="imageOptions"
								:show-all-levels="false"
								class="full-extent-select"
							></el-cascader>
						</el-form-item>
						<el-form-item label="资源组" prop="mainProduct">
							<el-select v-model="mainNode.product_id" prop="main_product" class="full-extent-select">
								<el-option v-for="item in productOptions" :value="item.id" :label="item.name" :key="item.id">
								</el-option>
							</el-select>
						</el-form-item>
						<!-- <el-form-item label="数量">
            <el-input-number size="mini" v-model="addForm.podNum"></el-input-number>
          </el-form-item> -->

						<div class="right-btn-box" v-if="slaveNodeList.length == 0">
							<span class="outin-handle">
								<a href="javascript:;" @click="addSlaveNode()">增加</a>
							</span>
						</div>
					</div>
					<div v-for="(tag, i) in slaveNodeList" :key="i">
						<div class="node-module">
							<h3 class="node-module-title">从节点</h3>
							<el-form-item label="环境" prop="slaveImage">
								<el-cascader
									v-model="tag.image_group"
									:options="imageOptions"
									:show-all-levels="false"
									class="full-extent-select"
								></el-cascader>
							</el-form-item>
							<el-form-item label="资源组">
								<el-select v-model="tag.product_id" class="full-extent-select">
									<el-option v-for="item in productOptions" :value="item.id" :label="item.name" :key="item.id">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="数量">
								<el-input-number v-model="tag.pod_num"></el-input-number>
							</el-form-item>
							<div class="right-btn-box">
								<span class="outin-handle">
									<a href="javascript:;" @click="delSlaveNode(i)">删除</a>
									<a href="javascript:;" @click="addSlaveNode()" v-if="i == slaveNodeList.length - 1">增加</a>
								</span>
							</div>
						</div>
					</div>

					<div v-if="advanced == true">
						<h3 class="add-alike-title">输入配置</h3>
						<el-form-item label="数据集">
							<plug-dataset :dataset_list="dataset_list" @infoDataset="infoDataset" v-if="addForm.dataset_list" />
						</el-form-item>
						<el-form-item label="S3输入" v-if="s3_flag">
							<plug-s3 :in_s3_list="in_s3_list" @infoS3="infoInS3" v-if="in_s3_list" />
						</el-form-item>
						<el-form-item label="预训练模型">
							<plug-model :model_list="model_list" @infoModel="infoModel" v-if="model_list" />
						</el-form-item>
						<h3 class="add-alike-title">输出配置</h3>
						<el-form-item label="S3输出" v-if="s3_flag">
							<plug-s3 :in_s3_list="out_s3_list" @infoS3="infoOutS3" v-if="out_s3_list" />
						</el-form-item>
						<el-form-item label="端口映射">
							<plug-port :port_list="port_list" @infoPort="infoPort" v-if="port_list" />
						</el-form-item>
					</div>
					<div class="right-btn-box">
						<span class="outin-handle">
							<a href="javascript:;" @click="setAdvanced()">高级设置</a>
						</span>
					</div>
					<el-form-item label=" ">
						<el-button class="none-type" type="primary" v-if="active == 1" @click="addNoteBook">确定</el-button>
					</el-form-item>
				</div>
				<div v-show="active == 2">
					<h1 class="succeed-hint">创建成功</h1>
					<div class="succeed-btn">
						<a href="javascript:;" class="start" @click="start">启动</a>
						<a href="javascript:;" class="go" @click="toDetail">立即前往</a>
					</div>
				</div>
			</el-form>
		</div>
	</v-layout>
</template>

<script>
import { getExperimentDetail, addExperiment, startExperiment } from "@/api/notebook";
import { getMarketAlgorithmVersionDetail } from "@/api/marketAlgorithmVersion";
import plugDataset from "@/components/module/plug-in-dataset";
import plugS3 from "@/components/module/plug-in-s3";
import plugModel from "@/components/module/plug-in-model";
import plugPort from "@/components/module/plug-in-port";
import { getAllProducts } from "@/api/product";
import { getAllImageGroups, getImageDetail } from "@/api/image";
import { mainImageRule, mainProductRule, slaveImageRule } from "@/utils/rule";
import { paramMap } from "@/utils/maps";
export default {
	data() {
		return {
			s3_flag: paramMap["s3_flag"],
			addForm: {
				is_webide: true,
				dataset_list: [],
				name: "",
				desc: "",
			},
			active: 1,
			dataset_list: [],
			in_s3_list: [],
			model_list: [],
			out_s3_list: [],
			port_list: [],
			advanced: false,
			submitRules: {
				name: [
					{ required: true, message: "该项为必填项" },
					{ required: true, min: 1, max: 40, message: "长度在1到40个字符" },
				],
				desc: [
					{ required: true, message: "该项为必填项" },
					{ required: true, min: 1, max: 200, message: "长度在1到200个字符" },
				],
				commit_msg: [
					{ required: true, message: "该项为必填项" },
					{ required: true, min: 1, max: 200, message: "长度在1到200个字符" },
				],
				main_image_id: [{ required: true, message: "该项为必填项" }],
				main_product: [{ required: true, message: "该项为必填项" }],
				mainNodeImageId: [{ required: true, validator: mainImageRule.bind(this, this), trigger: "change" }],
				mainProduct: [{ required: true, validator: mainProductRule.bind(this, this), trigger: "change" }],
				tagImageId: [{ required: true, validator: slaveImageRule.bind(this, this), trigger: "change" }],
				// port: [
				//   { required: true, message: "请填写端口" },
				// ]
			},
			mainNode: { pod_num: 1, type: 0 },
			slaveNodeList: [],
			imageOptions: [],
			productOptions: [],
			bizId: "",
			algorithmVersion_id: this.$route.query.algorithmVersion_id,
			algorithm_name: this.$route.query.algorithm_name,
			algorithm_desc: this.$route.query.algorithm_desc,
			algorithm_avatar: this.$route.query.algorithm_avatar,
		};
	},
	components: {
		plugDataset,
		plugS3,
		plugModel,
		plugPort,
	},
	async created() {},
	async mounted() {
		this.getAllImageGroups();
		this.getProductList();
		this.getData();
		this.$forceUpdate();
	},
	methods: {
		async setAddForm() {
			this.addForm.fork_from = this.algorithmVersion_id;
			this.addForm.node_group_list = [];
			this.mainNode.type = 1;
			this.mainNode.image_id = this.mainNode.image_group[2];
			this.addForm.node_group_list.push(this.mainNode);
			for (let i = 0; i < this.slaveNodeList.length; i++) {
				this.slaveNodeList[i].type = 2;
				this.slaveNodeList[i].image_id = this.slaveNodeList[i].image_group[2];
				this.addForm.node_group_list.push(this.slaveNodeList[i]);
			}
			this.addForm.s3_list = [];
			for (let i = 0; i < this.in_s3_list.length; i++) {
				this.in_s3_list[i].type = 0;
				this.addForm.s3_list.push(this.in_s3_list[i]);
			}
			for (let i = 0; i < this.out_s3_list.length; i++) {
				this.out_s3_list[i].type = 1;
				this.addForm.s3_list.push(this.out_s3_list[i]);
			}
			console.log("print port_list", this.port_list);
			this.addForm.port_list = [];
			for (let i = 0; i < this.port_list.length; i++) {
				this.addForm.port_list.push(this.port_list[i]);
			}
			this.addForm.dataset_list = [];
			for (let i = 0; i < this.dataset_list.length; i++) {
				this.addForm.dataset_list.push(this.dataset_list[i]);
			}
			this.addForm.model_list = [];
			for (let i = 0; i < this.model_list.length; i++) {
				this.addForm.model_list.push(this.model_list[i]);
			}
		},
		async getAddForm(data) {
			this.addForm = data;
			this.port_list = [];
			this.slaveNodeList = [];
			this.in_s3_list = [];
			this.out_s3_list = [];
			this.model_list = [];
			this.dataset_list = [];
			for (let node of data.node_group_list) {
				if (node.type == 1) {
					this.mainNode = node;
					let res = await getImageDetail({ id: this.mainNode.image_id });
					let mainImage = res.data;
					this.mainNode.image_group = [mainImage.visibility.toString(), mainImage.engine.toString(), mainImage.id];
				} else {
					let res = await getImageDetail({ id: node.image_id });
					let slaveImage = res.data;
					let slaveNode = node;
					slaveNode.image_group = [slaveImage.visibility.toString(), slaveImage.engine.toString(), slaveImage.id];
					this.slaveNodeList.push(slaveNode);
				}
			}
			if (data.s3_list.length > 0)
				for (let s3 of data.s3_list) {
					if (s3.type == 0) {
						this.in_s3_list.push(s3);
					} else {
						this.out_s3_list.push(s3);
					}
				}
			if (data.port_list) {
				this.port_list = data.port_list;
			}
			if (data.model_list) {
				this.model_list = data.model_list;
			}
			if (data.dataset_list) {
				this.dataset_list = data.dataset_list;
			}
			if (
				this.dataset_list.length > 0 ||
				this.in_s3_list.length > 0 ||
				this.out_s3_list.length > 0 ||
				this.model_list.length > 0 ||
				this.port_list.length > 0
			) {
				this.advanced = true;
			}
			this.$forceUpdate();
		},
		setAdvanced() {
			this.advanced = !this.advanced;
		},
		avatarPath(data) {
			this.addForm.avatar = data;
		},
		async getData() {
			if (this.$route.query.id) {
				let res = await getExperimentDetail({ id: this.$route.query.id });
				this.getAddForm(res.data);
			} else if (this.algorithmVersion_id) {
				let res = await getMarketAlgorithmVersionDetail({ id: this.algorithmVersion_id });
				this.getAddForm(res.data);
				this.addForm.name = this.algorithm_name;
				this.addForm.desc = this.algorithm_desc;
				this.addForm.avatar = this.algorithm_avatar;
				this.addForm.is_webide = true;
				this.addForm = JSON.parse(JSON.stringify(this.addForm));
			}
		},
		start() {
			startExperiment({ id: this.addForm.id });
		},
		toDetail() {
			console.log("addForm", this.addForm);
			let query = {
				id: this.addForm.id,
			};
			this.$router.push({
				path: "/modelZnyTestt/code",
				query,
			});
		},
		infoDataset(datasets) {
			this.dataset_list = [];
			datasets.forEach((e) => {
				e.dataset_id = e.id;
				e.dataset = {
					name: e.name,
					alias: e.alias,
					id: e.id,
				};
			});
			this.dataset_list = datasets;
			console.log("infoDataset", datasets);
		},
		infoInS3(s3s) {
			this.in_s3_list = s3s;
		},
		infoOutS3(s3s) {
			this.out_s3_list = s3s;
		},
		infoModel(models) {
			this.model_list = [];
			console.log("modes", models);
			// models.forEach(e => { e.model_version_id = e.version.id
			//   e.model_id = e.id })
			this.model_list = models;
		},
		infoPort(ports) {
			this.port_list = ports;
			console.log(this.port_list);
		},
		async getProductList() {
			let res = await getAllProducts();
			this.productOptions = res.data;
		},

		succeedOver(data) {
			console.log(data);
		},

		addSlaveNode() {
			let data = { type: 1, pod_num: 1 };
			this.slaveNodeList.push(data);
		},
		delSlaveNode(i) {
			this.slaveNodeList.splice(i, 1);
		},
		async getAllImageGroups() {
			let res = await getAllImageGroups();
			this.imageOptions = res.data;
		},
		addNoteBook() {
			this.setAddForm();
			this.$refs.form.validate(async (valid) => {
				if (valid) {
					this.addForm.id = null;
					let res = await addExperiment({ ...this.addForm, type: 1 });
					this.bizId = res.data.id;
					this.getAddForm(res.data);
					if (res && res.data) {
						this.active = 2;
					}
				}
			});
		},
	},
};
</script>
<style lang="less" scoped>
@import "~@/assets/css/detail-add.less";
</style>
